<template>
  <div class="content">
    <el-card>
      <div class="basic-info">
        用户详情
        <el-button style="float: right" size="small" @click="$router.go(-1)">
          返回</el-button
        >
      </div>
      <el-divider></el-divider>
      <div style="text-align: center">
        <el-avatar :size="150">
          <el-image
            v-if="userInfo.avatar"
            :src="userInfo.avatar"
            style="width: 100%; height: 100%;"
            fit="cover"
          >
          </el-image>

          <el-upload
            class="avatar-uploader"
            action="http://localhost:7080/api/FileUpload/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <i v-if="!userInfo.avatar" class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-avatar>

        <h2 class="artistic-text">{{ userInfo.nickname }}</h2>
        <span
          style="
            border-right: 2px solid #d2d2d2;
            padding-right: 10px;
            color: #999999;
          "
          >在学课程 {{ userInfo.courseNum }}</span
        >
        <span style="padding-left: 5px; color: #999999"
          >已下订单
          {{ userInfo.courseOrder }}</span
        >
        <p style="margin-top: 10px">
          <el-tag size="small"
                  :style="userInfo.state == 0 ? 'background: #d9f6ee; color: #3dd4a7' : 'background: #fbeaea; color: #f56c6c'"
          >
            <i class="fa fa-circle"></i>
            {{ userInfo.state == 0 ? "正常":"已注销"}}</el-tag
          >
        </p>
      </div>
    </el-card>
    <el-card class="rowStyle">
      <div class="basic-info">基础信息</div>
      <el-divider></el-divider>
      <el-descriptions class="margin-top" :column="3">
        <el-descriptions-item>
          <template slot="label"> 姓名 </template>
          {{ userInfo.username }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 昵称 </template>
          {{ userInfo.nickname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 手机号 </template>
          {{ userInfo.mobile }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 性别 </template>
          {{ userInfo.sex ? userInfo.sex == 1 ? '男':'女'  : '男' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 年龄 </template>
          {{ userInfo.age }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 联系地址 </template>
          {{ userInfo.address }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 标签 </template>
          <el-tag size="mini" type="primary">java开发</el-tag>
          <el-tag size="mini" type="success">摄影</el-tag>
          <el-tag size="mini" type="danger">考研</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        id: "",
        avatar:""
      },
      viewerVisible:false
    };
  },
  created() {
    const userId = this.$route.query.id;
    this.userInfo.id = userId;
    this.getUserDetail();
  },
  methods: {
    async getUserDetail() {
      const result = await this.$axios.get("/User/detail", {
        params: { id: this.userInfo.id },
      });
      if (result.data.success) {
        this.userInfo = result.data.user;
      } else {
        this.$message.error(result.data.message);
      }
    },

    updateUser(){
      this.$axios.put("/User/update",this.userInfo).then((res)=>{
        if (res.data.success){
          this.userInfo = res.data.user;
          sessionStorage.setItem("user",JSON.stringify(res.data.user));
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },

    handleClose() {
      this.drawer = false;
    },

    //头像上传成功的回调
    handleAvatarSuccess(res){
      if (res.success){
        this.userInfo.avatar = res.filePath;
        this.updateUser()
        this.$message.success(res.msg);

        // 页面刷新
        setTimeout(() => {
          location.reload();
        }, 300); // 延时以确保上传数据已更新
      }
    },

    beforeAvatarUpload(file){
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJpgOrPng) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
  }
};
</script>

<style scoped>
.basic-info {
  border-left: 5px solid #2661ef;
  padding-left: 10px;
  font-weight: bold;
}

.artistic-text {
  font-family: 'Arial', sans-serif; /* 可选择不同的字体 */
  font-size: 32px; /* 文字大小 */
  font-weight: bold;
  color: sandybrown; /* 文字颜色 */
  margin: 10px 0;
}



.avatar-uploader-icon {
  font-size: 60px;
  color: #8c939d;
  width: 50px;
  height: 108px;
  line-height: 150px;
  text-align: center;
}


.rowStyle {
  margin-top: 10px;
}

</style>
